<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <style>
            div.c1{
                width:200px;height:300px;
                border:1px solid red;
            }
            img{
                float:left;
            }
            
            div.c2{
                width:100px;height:100px;
                background-color:deeppink;
                float:left;
            }
            div.c3{
                width:100px;height:100px;
                background-color:gold;
                float:right;
            }
            div.c4{
                width:100px;height:100px;
                background-color:greenyellow;
                float:left;
            }
            div.c5{
                width:100px;height:100px;
                background-color:orangered;
                float:right;
            }
            span{
                float:left;
                width:100px;
                height:100px;
                border:1px solid red;
             
            }
            /*
            浮动的用处:
            1)文字环绕
            2)块级元素并排
            */
        </style>
    </head>
    <body>
        <h2>CSS样式实例:浮动干啥的</h2>
        <div class='c1'>
            一个男人的价值,可以从他胡子的长度,以及...皮带的长度上<img src='./images/xiao.jpg' />看出来一个男人的价值,可以从他胡子的长度,以及...皮带的长度上看出来一个男人的价值,可以从他胡子的长度,以及...皮带的长度上看出来
        </div>
        <hr/>
        <div style='clear:both;'></div>
        <div class='c2'>1111</div>
        <div class='c3'>2222</div>
        <div class='c4'>3333</div>
        <div class='c5'>4444</div>
        <span>xxxxxxooooooo</span>
    </body>
</html>